<template>
  <div style="margin: 10px">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="昵称/群">
        <el-input v-if="region==1" v-model="queryParams.nickName" placeholder="昵称"></el-input>
        <el-input v-if="region==2" v-model="queryParams.groupName" placeholder="群名"></el-input>
      </el-form-item>
      <el-form-item label="好友/群">
        <el-select v-model="region" >
          <el-option label="添加好友" value="1"></el-option>
          <el-option label="添加群" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="onClear">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="result-main">
      <el-table
        v-if="userList.length>0"
        :data="userList"
        style="width: 100%">
        <el-table-column
          prop="nickName"
          label="昵称"
          width="180">
        </el-table-column>
        <el-table-column label="头像" align="center" prop="headImage" width="100">
          <template slot-scope="scope">
            <image-preview :src="scope.row.headImage" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column label="是否商家" align="center" prop="business">
          <!--        <template slot-scope="scope">-->
          <!--          <dict-tag :options="dict.type.chat_business_type" :value="scope.row.business"/>-->
          <!--        </template>-->
        </el-table-column>
        <el-table-column
          label="操作">
          <template v-slot="slot">
            <div v-if="currentUser.id!=slot.row.id">
              <el-button v-if="judgeFriend(slot.row.id)==0" type="primary" size="small" plain @click="addFriend(slot.row.id)">申请好友</el-button>
              <span v-if="judgeFriend(slot.row.id)==1" >已是好友</span>
              <span v-if="judgeFriend(slot.row.id)==2" >被拒绝添加</span>
              <span v-if="judgeFriend(slot.row.id)==3" >正在申请中</span>
              <span v-if="judgeFriend(slot.row.id)==4" >等待你的验证</span>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-table
        v-if="groupList.length>0"
        :data="groupList"
        style="width: 100%">
        <el-table-column
          prop="groupName"
          label="群昵称"
          width="180">
        </el-table-column>
        <el-table-column label="群头像" align="center" prop="headImage" width="100">
          <template slot-scope="scope">
            <image-preview :src="scope.row.headImage" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column label="群状态" align="center" prop="groupStatus">
        </el-table-column>
        <el-table-column label="群简介" align="center" prop="introduce">
        </el-table-column>
        <el-table-column label="群人数" align="center" prop="userNum">
        </el-table-column>
        <el-table-column
          label="操作">
          <template v-slot="slot">
            <el-button v-if="judgeGroup(slot.row.groupId)==0" type="primary" plain @click="addGroup(slot.row.groupId)">申请进群</el-button>
            <span v-if="judgeGroup(slot.row.groupId)==1" >已在群里</span>
            <span v-if="judgeGroup(slot.row.groupId)==2" >被拒绝添加</span>
            <span v-if="judgeGroup(slot.row.groupId)==3" >正在申请中</span>
            <span v-if="judgeGroup(slot.row.groupId)==4" >等待你的验证</span>
          </template>
        </el-table-column>
      </el-table>

      <div v-if="!showFriendVerifyList&&(groupList<1||userList<1)">
        没有结果
      </div>
      <div v-if="friendVerifyList.length>0&&showFriendVerifyList">
        <h2 style="text-align: center">下面为好友申请验证</h2>
        <el-table
          :data="friendVerifyList"
          style="width: 100%">
          <el-table-column
            prop="nickName"
            label="昵称">
          </el-table-column>
          <el-table-column label="头像" align="center" prop="headImage" width="100">
            <template slot-scope="scope">
              <image-preview :src="scope.row.headImage" :width="50" :height="50"/>
            </template>
          </el-table-column>
          <el-table-column label="是否商家" align="center" prop="business">
            <!--        <template slot-scope="scope">-->
            <!--          <dict-tag :options="dict.type.chat_business_type" :value="scope.row.business"/>-->
            <!--        </template>-->
          </el-table-column>
          <el-table-column
            prop="messageAdd"
            label="验证信息"
            width="180">
          </el-table-column>
          <el-table-column
            label="操作">
            <template v-slot="slot">
              <el-button v-if="slot.row.friendStatus==4" type="primary" size="small" plain @click="VerifyFriend(slot.row.id,1)">同意</el-button>
              <el-button v-if="slot.row.friendStatus==4" type="primary" size="small" plain @click="VerifyFriend(slot.row.id,2)">拒绝</el-button>
              <span v-if="slot.row.friendStatus==3" >申请中</span>
              <span v-if="slot.row.friendStatus==2" >被拒绝</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {addFriendUser, getAllUser, listUser, modifyFriendUser} from "@/api/chat/user";
import {listGroup} from "../../../api/chat/group";
import {addGroupUser, getUserGroup} from "../../../api/chat/user";

export default {
  name: "AddFriendOrGroup",
  props:[
    'currentUser'
  ],
  data(){
    return {
      friendVerifyList:[],
      showFriendVerifyList:true,
      allFriendList:[],//查询好友关联表的所有状态数据，主要是为了在查询时判断是否有申请或是否已经为好友
      allUserGroupRelevancy:[],//已经关联的群（包括已加入和还在申请中）
      total:0,
      loading:false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },region: '1',
      userList:[],
      groupList:[],//根据群昵称查询到的群

    }
  },
  created() {
    //进入该页时查询需要认证的好友申请
    this.select_friend()
    this.selectAllFriend()
    this.selectAllGroupUser()
  },
  methods: {
    select_friend(){
      // 状态 friendStatus,（同意1、拒绝2、等待验证发起方3、等待验证接收方4,null默认查询所有）
      getAllUser(this.currentUser.id,4).then(response => {
        let list1 = response.data;
        getAllUser(this.currentUser.id,3).then(response => {
          let list2 = response.data;
          this.friendVerifyList = list1.concat(list2)
          this.showFriendVerifyList = true
        })
      })

    },
    selectAllFriend(){
      getAllUser(this.currentUser.id,null).then(response => {
        this.allFriendList = response.data;
      })
    },
    //查询用户有关联的所有的群
    selectAllGroupUser(){
      getUserGroup(this.currentUser.id).then(response => {
        this.allUserGroupRelevancy = response.data;
        console.info(99912)
        console.info(this.allUserGroupRelevancy)
      })
    },
    onSubmit() {//查询
      // this.showFriendVerifyList = true
      if (this.region==1){
        listUser(this.queryParams).then( result =>{
          this.groupList=[]
          this.userList = result.rows
          this.total = result.total;
          this.loading = false;
        })
      }else if (this.region==2){
        listGroup(this.queryParams).then( result =>{
          this.groupList=result.rows
          console.info(11)
          console.info(this.groupList)
          this.userList = []
          this.total = result.total;
          this.loading = false;
        })
      }
    },
    onClear() {
      this.userList = []
      this.groupList = []

    },
    addFriend(friendId){
      // 状态,（同意1、拒绝2、等待验证发起方3、等待验证接收方4）
      this.$prompt('请输入验证信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        addFriendUser(this.currentUser.id,friendId,value).then(result => {
          if (result){
            this.$message({
              message: '已发起好友请求，等待对方确认',
              type: 'success',
            });
            this.selectAllGroupUser(this.currentUser.id)
            console.info(101010)
            //这里重新执行一下查询列表
            // this.select_friend()
            // this.onSubmit()
          }else {
            this.$message({
              message: '添加失败或申请重复或已经是好友',
              type: 'warning'
            });
          }
          this.onSubmit()
          this.select_friend()
          this.selectAllFriend()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消添加'
        });
      });
    },
    //申请进群
    addGroup(groupId){
      // 状态,（同意1、拒绝2、等待验证发起方3、等待验证接收方4）
      this.$prompt('请输入验证信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '邮箱格式不正确'

      }).then(({}) => {
        console.info(this.currentUser.id,groupId)
        addGroupUser(this.currentUser.id,groupId).then(result => {
          console.info(this.currentUser.id)
          if (result){
            this.$message({
              message: '已发起进群请求，等待对方确认',
              type: 'success'
            });
          }else {
            this.$message({
              message: '添加失败或申请重复或已经在群内',
              type: 'warning'
            });
          }
          this.onSubmit()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消添加'
        });
      });
    },
    judgeFriend(id){
      if (this.allFriendList.length>0){
        let result = this.allFriendList.find(item =>{
          return item.id == id;
        })
        if (result!==undefined){
          return result.friendStatus
        }
        return 0
      }
      return 0
    },
    //判断是否在群里
    judgeGroup(groupId){//查询到的所有群的groupId
      if (this.allUserGroupRelevancy.length>0){
        let result = this.allUserGroupRelevancy.find(item =>{//遍历用户已经加入的群
          return item.groupId == groupId;
        })
        if (result!==undefined){
          return result.groupStatus
        }
        return 0
      }
      return 0
    },
    VerifyFriend(friendId,friendStatus){//修改好友状态为 互为好友
      // alert(friendId+" "+friendStatus)
      modifyFriendUser(this.currentUser.id,friendId,friendStatus).then(result => {
        if (result.code==200){
          this.$message({
            message: '添加好友成功',
            type: 'success'
          });
          //这里重新执行一下查询列表
          // this.select_friend()
          // this.onSubmit()
        }
        this.select_friend()
        this.selectAllFriend()
      })
    },
  }
}
</script>

<style >
.result-main{
  height: 550px;
  overflow: auto;
}
</style>
